<!DOCTYPE html>
<html>
<head>
    <title>payment</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
        .password_circle {
            position: relative;
            width: 66%;
            height: 6%;
            left: 50%;
            bottom: 54.5%;
            margin-left: -33%;
        }

        .span_password {
            position: absolute;
            display: inline-block;
            width: 17%;
            height: 100%;
            left: 0;
            bottom: 0;
        }

        .span1 {
            left: 0;
        }

        .span2 {
            left: 17%;
        }

        .span3 {
            left: 34%;
        }

        .span4 {
            left: 51%;
        }

        .span5 {
            left: 68%;
        }

        .span6 {
            left: 85%;
        }

        .span_active {
            background: url("img/circle.png") center center no-repeat;
        }

        .key_password1 {
            width: 100%;
            height: 24%;
            position: fixed;
            bottom: 7.9%;
            left: 0;
        }

        .key_password0 {
            width: 33.33%;
            height: 7.9%;
            position: fixed;
            bottom: 0;
            left: 33.33%;
        }
    </style>
</head>
<body>

<!--金额-->
<div class="container container_money">
    <div class="page page_money">
        <img src="img/Paynum.png">
    </div>
    <div class="paynumbtn">
        <img src="img/paynum_btn.png">
    </div>
</div>
<!--密码-->
<div class="coitainer container_password">
    <div class="page page_password">
        <img src="img/pay_password.png">

        <div class="password_circle">
            <span class="span_password span1"></span>
            <span class="span_password span2"></span>
            <span class="span_password span3"></span>
            <span class="span_password span4"></span>
            <span class="span_password span5"></span>
            <span class="span_password span6"></span>
        </div>
        <div class="key_password key_password1"></div>
        <div class="key_password key_password0"></div>
    </div>

</div>
<!--购买成功-->
<div class="coitainer container_success">
    <div class="page page_success">
        <img src="img/paymoney.png">
    </div>
    <div id="back_btn1"><a href="javascript:void(0)"></a></div>
</div>

<div class="containerdialog">
    <div class="headImg">
        <img src="img/headimg.png" class="head_img">
        <img src="img/homepage.png" class="menu1">
        <img src="img/menu2.png" class="menu2">
        <img src="img/menu3.png" class="menu3">
        <img src="img/menu4.png" class="menu4">
        <img src="img/menu5.png" class="menu5">
        <img src="img/menu6.png" class="menu6">
        <img src="img/menu7.png" class="menu7">
        <img src="img/footerClose.png" class="footer_img">
    </div>
    <div class="footerClose" id="fooClose">
        <img src="img/close2.png">
    </div>
</div>
<script type="text/javascript" src="lib/zepto.min.js"></script>
<script type="text/javascript">
    Zepto(function ($) {
        var num = 0;
        $(".wechatpay").click(function () {
            $(".container_map").css("display", "none");
            $(".container_money").css("display", "block");
        })
        $(".paynumbtn").click(function () {
            $(".container_money").css("display", "none");
            $(".container_password").css("display", "block");
        })
        $("#back_btn1").click(function () {
            window.open("myMercedes.html", "_self");
        })
        $(".key_password").click(function () {
            num++;
            switch (num + "") {
                case "1":
                    $(".span1").addClass("span_active");
                    break;
                case "2":
                    $(".span2").addClass("span_active");
                    break;
                case "3":
                    $(".span3").addClass("span_active");
                    break;
                case "4":
                    $(".span4").addClass("span_active");
                    break;
                case "5":
                    $(".span5").addClass("span_active");
                    break;
                case "6":
                    $(".span6").addClass("span_active");
                    break;
            }
            if (num == 6) {
                $(".key_password").attr("disabled", true);
                setTimeout(function () {
                    $(".container_password").css("display", "none");
                    $(".container_success").css("display", "block");
                }, 3000);
            }
        })
        $(".menu1").click(function () {
            window.open("female.html", "_self");
        })
        $(".menu4").click(function () {
            window.open("myFavourite.html", "_self");
        })
        $(".menu5").click(function () {
            window.open("order.html", "_self");
        })
    });
    function containPay() {
        $(".contain_pay").css("display", "none");
    }
</script>
</body>
</html>